<template>
  <div>
    <van-row>
      <van-col span="24" class="title">
        <span style="color: white">浩物安全管理系统</span>
      </van-col>
    </van-row>
    <!-- <van-pull-refresh v-model="loading" @refresh="onRefresh"> -->
      <van-row class="topMargin">
        <van-col span="24">
          <van-tabs
            v-model="active"
            color="#576b95"
            line-width="80px"
            swipeable
            @click="changeTab"
          >
            <van-tab title="待办审批">
              <van-row>
                <van-col span="24">
                  <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                  >
                    <van-cell
                      v-for="item in car_list"
                      :key="item.id"
                      @click="toDetail(item)"
                      is-link
                    >
                      <template #label>
                        <div>使用方式: {{ syfsEnum(item.childType) }}</div>
                        <div>
                          主机厂品牌 - 车系 :
                          {{
                            item.vehicleInfo.vehicleSeries.seriesFactory +
                            item.vehicleInfo.vehicleSeries.seriesName +
                            item.vehicleInfo.vehicleBrand.brandName +
                            item.vehicleInfo.vehicleBrand.brandCode
                          }}
                        </div>
                      </template>
                      <template #title>
                        <div>
                          车牌号: {{ item.vehicleInfo.plateNum }}
                          <van-tag
                            v-if="item.vehicleInfo.vehicleType === 1"
                            type="primary"
                            >试</van-tag
                          >
                          <van-tag
                            v-else-if="item.vehicleInfo.vehicleType === 2"
                            type="primary"
                            >客</van-tag
                          >
                          <van-tag
                            v-else-if="item.vehicleInfo.vehicleType === 3"
                            type="primary"
                            >救</van-tag
                          >
                        </div>
                      </template>
                    </van-cell>
                  </van-list>
                </van-col>
              </van-row>
            </van-tab>

            <van-tab title="审批日志">
              <van-row>
                <van-col span="24">
                  <van-list
                    v-model="loading"
                    :finished="finished_log"
                    finished-text="没有更多了"
                    @load="onLoad_log"
                  >
                    <van-cell
                      v-for="item in car_list_log"
                      :key="item.id"
                    >
                      <template #label>
                        <div>使用方式: {{ syfsEnum(item.childType) }}</div>
                        <div>
                          主机厂品牌 - 车系 :
                          {{
                            item.vehicleInfo.vehicleSeries.seriesFactory +
                            item.vehicleInfo.vehicleSeries.seriesName +
                            item.vehicleInfo.vehicleBrand.brandName +
                            item.vehicleInfo.vehicleBrand.brandCode
                          }}
                        </div>
                      </template>
                      <template #title>
                        <div>
                          车牌号: {{ item.vehicleInfo.plateNum }}
                          <van-tag
                            v-if="item.vehicleInfo.vehicleType === 1"
                            type="primary"
                            >试</van-tag
                          >
                          <van-tag
                            v-else-if="item.vehicleInfo.vehicleType === 2"
                            type="primary"
                            >客</van-tag
                          >
                          <van-tag
                            v-else-if="item.vehicleInfo.vehicleType === 3"
                            type="primary"
                            >救</van-tag
                          >
                        </div>
                        <div>
                                            <van-tag
                    v-if="item.status === 1"
                    plain
                    type="primary"
                    style="margin-left: 5px"
                    >发起中</van-tag
                  >
                  <van-tag
                    v-if="item.status === 2"
                    plain
                    type="primary"
                    style="margin-left: 5px"
                    >审批通过</van-tag
                  >
                  <van-tag
                    v-if="item.status === 3"
                    plain
                    type="primary"
                    style="margin-left: 5px"
                    >用车中</van-tag
                  >
                  <van-tag
                    v-if="item.status === 4"
                    plain
                    type="primary"
                    style="margin-left: 5px"
                    >审批拒绝</van-tag
                  >
                  <van-tag
                    v-if="item.status === 5"
                    plain
                    type="primary"
                    style="margin-left: 5px"
                    >还车成功</van-tag
                  >
                  <van-tag
                    v-if="item.status === 6"
                    plain
                    type="primary"
                    style="margin-left: 5px"
                    >流程结束</van-tag
                  >
                  <van-tag
                    v-if="item.status === 7"
                    plain
                    type="primary"
                    style="margin-left: 5px"
                    >取消用车</van-tag
                  >
                        </div>
                      </template>
                    </van-cell>
                  </van-list>
                </van-col>
              </van-row>
            </van-tab>
          </van-tabs>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="24">
          <van-cell
            style="height: 40px; background-color: white"
            class="bg_grey"
          ></van-cell>
        </van-col>
      </van-row>
    <!-- </van-pull-refresh> -->
  </div>
</template>

<script>
import { Api } from "../../api/api_config";
import { Toast } from "vant";

export default {
  data() {
    return {
      car_list: [],
      page: 1,
      pageSize: 5,
      loading: false,
      finished: false,
      currentUser: {},
      totalCount: 0,
      active: 0,

      car_list_log: [],
      totalCount_log: 0,
      finished_log: false,
      page_log: 1,
      pageSize_log: 5,
    };
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    initData() {
      this.$store.state.tab_show = true;
      // 获取company对象
      this.currentUser = this.$store.state.configuration.currentUser;
    },
    back() {
      this.$store.state.tab_show = true;
      this.$router.push("/carUsage");
    },
    toDetail(item) {
      this.$store.state.useRecord = item;
      this.$router.push("/approve/approveDetail");
    },
    onLoad() {
      this.loading = true;
      this.getVehicle();
    },
    onLoad_log() {
      this.loading = true;
      this.getVehicleLog();
    },
    syfsEnum(value) {
      switch (value) {
        case 1:
          return "试驾";
        case 2:
          return "客用";
        case 3:
          return "救援";
        case 4:
          return "维保";
        case 5:
          return "挪车";
        case 6:
          return "加油";
      }
    },
    getVehicle() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      let that = this;
      let url =
        Api.useRecord.useRecord.url +
        "?isNeedApply=true" +
        "&CompanyId=" +
        this.currentUser.depId +
        "&page=" +
        this.page +
        "&pagesize=" +
        this.pageSize;
      this.$axios({
        method: Api.useRecord.useRecord.method,
        url: url,
      })
        .then(function (response) {
          that.page = that.page + 1;
          response.data.items.forEach((element) => {
            that.car_list.push(element);
          });
          that.totalCount = response.data.totalCount;
          that.loading = false;
          if (that.car_list.length >= that.totalCount) {
            // console.log(that.car_list);
            that.finished = true;
          }
          Toast.clear();
        })
        .catch(function (error) {
          console.log(error);
          Toast.clear();
        });
    },
    getVehicleLog() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      let that = this;
      let url =
        Api.useRecord.useRecord.url +
        "?isNeedApply=false" +
        "&CompanyId=" +
        this.currentUser.depId +
        "&page=" +
        this.page_log +
        "&pagesize=" +
        this.pageSize_log;
      this.$axios({
        method: Api.useRecord.useRecord.method,
        url: url,
      })
        .then(function (response) {
          that.page_log = that.page_log + 1;
          response.data.items.forEach((element) => {
            that.car_list_log.push(element);
          });
          that.totalCount_log = response.data.totalCount;
          that.loading = false;
          if (that.car_list_log.length >= that.totalCount_log) {
            // console.log(that.car_list);
            that.finished_log = true;
          }
          Toast.clear();
        })
        .catch(function (error) {
          console.log(error);
          Toast.clear();
        });
    },
    onRefresh() {
      this.reset();
      if (this.active === 1) {
        this.onLoad_log();
      } else {
        this.onLoad();
      }
    },
    changeTab(e) {
      this.reset();
      if (e === 1) {
        this.onLoad_log();
      } else {
        this.onLoad();
      }
    },
    reset() {
      this.car_list = [];
      this.car_list_log = [];
      this.page = 1;
      this.pageSize = 5;
      this.totalCount = 0;
      this.finished = false;
      this.page_log = 1;
      this.pageSize_log = 5;
      this.totalCount_log = 0;
      this.finished_log = false;
    },
  },
};
</script>

<style scoped>
.cell .van-cell__title {
  min-width: 70%;
}
</style>
